<template>
  <div class="btnContainer" :style="style" >
    <span class="btnText" v-text="btnText"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  const HEIGHT = '9VW';
  const WIDTH = '44VW';

  export default {
    name: 'btn-reverse',

    data() {
      return {
        style: {
          width: this.btnWidth,
          height: HEIGHT
        }
      };
    },

    props: {
      btnText: {
        type: String,
        default: 'btn need text !',
        required: true
      },
      btnWidth: {
        type: String,
        default: WIDTH
      }
      // backgroundColor:{
      //   type:String,
      //   default :''
      // }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .btnContainer
    display flex
    align-items center
    justify-content center
    background-color transparent
    border(main-color)
    border-radius 5vw
    box-sizing border-box

  .btnText
    word-main()
    color main-color

</style>
